<template>
  <div class="resources-center">

    <div class="main-content">
      <!-- 左侧面板 -->
      <div class="left-panel">
        <div class="chart-card">
          <h3>应用排名 Top5</h3>
          <canvas ref="leftTopChart"></canvas>
        </div>
        <div class="chart-card">
          <h3>AOM分布</h3>
          <div class="aom-chart-container">
            <div class="doughnut-wrapper">
              <canvas ref="doughnutChart"></canvas>
              <div class="center-text">{{ aomData.total }}</div>
            </div>
            <div class="legend-container">
              <div v-for="(item, index) in aomData.segments" :key="index" class="legend-item">
                <span class="legend-dot" :style="{ background: item.color }"></span>
                <span class="legend-text">{{ item.value }} ({{ item.percentage }}%)</span>
              </div>
            </div>
          </div>
        </div>
        <div class="chart-card">
          <h3>WAN带宽占用 Top5</h3>
          <div class="chart-wrapper">
            <div class="y-axis-label">流量(GB)</div>
            <canvas ref="leftBottomChart"></canvas>
          </div>
        </div>
      </div>

      <!-- 中间面板 -->
      <div class="center-panel">
        <div class="stat-box">
          <div class="stat-item">
            <span class="number">104</span>
            <span class="label">应用总数</span>
          </div>
          <div class="stat-item">
            <span class="number">23</span>
            <span class="label">使用中应用</span>
          </div>
          <div class="stat-item">
            <span class="number">28</span>
            <span class="label">异常应用数量</span>
          </div>
          <div class="stat-item">
            <span class="number">0</span>
            <span class="label">异常待处理应用</span>
          </div>
        </div>
        <div class="circle-container">
          <h2 class="center-title">TOP3异常应用</h2>
          <div class="orbit-system">
            <div class="center-circle">
              <div class="inner-content">
                <!-- <img src="@/assets/welink.png" class="app-icon" alt="Welink视频会议"/> -->
                <div class="app-name">Welink视频会议</div>
              </div>
            </div>
            <div class="base-grid"></div>
          </div>
        </div>
      </div>

      <!-- 右侧面板 -->
      <div class="right-panel">
        <div class="chart-card">
          <h3>应用异常流 Top5</h3>
          <div class="chart-wrapper">
            <div class="y-axis-label">%</div>
            <canvas ref="rightTopChart"></canvas>
          </div>
        </div>
        <div class="chart-card">
          <h3>实时应用丢包率趋势</h3>
          <div class="chart-wrapper trend-chart">
            <div class="y-axis-label">%</div>
            <canvas ref="lineChart"></canvas>
          </div>
        </div>
   
        <div class="chart-card">
          <h3>应用丢包率 Top5</h3>
          <div class="chart-wrapper">
            <canvas ref="rightBottomChart">%</canvas>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Chart, registerables } from 'chart.js'
Chart.register(...registerables)

export default {
  data() {
    return {
      charts: {
        leftTop: null,
        doughnut: null,
        leftBottom: null,
        rightTop: null,
        line: null,
        rightBottom: null
      },
      orbitItems: [
        { name: 'Zoom', icon: 'zoom-icon' },
        { name: 'Teams', icon: 'teams-icon' },
        { name: 'Google', icon: 'google-icon' },
        { name: 'Skype', icon: 'skype-icon' },
        { name: 'WebEx', icon: 'webex-icon' },
        { name: 'Zoom视频', icon: 'zoom-video-icon' },
        { name: 'Teams视频', icon: 'teams-video-icon' },
        { name: 'WebEx视频', icon: 'webex-video-icon' }
      ],
      aomData: {
        total: 1008,
        segments: [
          { value: 300, percentage: 29.76, color: '#4CAF50' },
          { value: 499, percentage: 49.50, color: '#FFC107' },
          { value: 101, percentage: 10.02, color: '#FF9800' },
          { value: 108, percentage: 10.71, color: '#F44336' }
        ]
      },
      appUsageData: {
        labels: ['Zoom', 'Teams', 'DingTalk', 'Tencent', 'WebEx'],
        values: [35, 25, 20, 15, 12]
      },
      trendData: {
        labels: ['18:00\n06-01', '22:00\n06-01', '02:00\n06-02', '06:00\n06-02', '10:00\n06-02', '14:00\n06-02'],
        datasets: [
          {
            label: 'WebEx视频会议',
            data: [4.5, 4.2, 4.8, 4.3, 4.6, 4.1],
            borderColor: '#2196F3',
            backgroundColor: 'transparent',
            tension: 0.4
          },
          {
            label: '小象视频',
            data: [3.8, 4.0, 3.5, 3.9, 3.7, 3.6],
            borderColor: '#4CAF50',
            backgroundColor: 'transparent',
            tension: 0.4
          },
          {
            label: 'Zoom',
            data: [3.2, 3.5, 3.3, 3.6, 3.4, 3.3],
            borderColor: '#FFC107',
            backgroundColor: 'transparent',
            tension: 0.4
          }
        ]
      }
    }
  },
  mounted() {
    this.initCharts()
  },
  methods: {
    initCharts() {
      // 初始化左上方图表
      this.charts.leftTop = new Chart(this.$refs.leftTopChart, {
        type: 'bar',
        data: {
          labels: ['Zoom', 'Teams', 'Google', 'Skype', 'WebEx'],
          datasets: [{
            data: [45, 40, 35, 30, 25],
            backgroundColor: '#2196F3'
          }]
        },
        options: {
          indexAxis: 'y',
          plugins: { legend: { display: false } }
        }
      })

      // 初始化环形图
      this.charts.doughnut = new Chart(this.$refs.doughnutChart, {
        type: 'doughnut',
        data: {
          datasets: [{
            data: this.aomData.segments.map(s => s.value),
            backgroundColor: ['#4CAF50', '#FFC107', '#FF9800', '#F44336'],
            borderWidth: 0,
            spacing: 1
          }]
        },
        options: {
          cutout: '80%',
          radius: '90%',
          plugins: {
            legend: {
              display: false
            },
            tooltip: {
              enabled: false
            }
          },
          responsive: true,
          maintainAspectRatio: false,
          rotation: -90,
          circumference: 360
        }
      })

      // 初始化WAN带宽占用图表
      this.charts.leftBottom = new Chart(this.$refs.leftBottomChart, {
        type: 'bar',
        data: {
          labels: ['Zoom', 'Teams', 'DingTalk', 'Tencent', 'WebEx'],
          datasets: [{
            data: [32, 25, 22, 15, 12],
            backgroundColor: '#2196F3',
            borderRadius: 2,
            maxBarThickness: 20
          }]
        },
        options: {
          indexAxis: 'x',
          scales: {
            y: {
              beginAtZero: true,
              max: 40,
              ticks: {
                stepSize: 10,
                color: '#999',
                font: {
                  size: 12
                }
              },
              grid: {
                color: 'rgba(255, 255, 255, 0.1)',
                drawBorder: false
              }
            },
            x: {
              ticks: {
                color: '#999',
                font: {
                  size: 12
                }
              },
              grid: {
                display: false
              }
            }
          },
          plugins: {
            legend: {
              display: false
            },
            tooltip: {
              enabled: true,
              backgroundColor: 'rgba(0, 0, 0, 0.7)',
              titleColor: '#fff',
              bodyColor: '#fff',
              padding: 10,
              displayColors: false
            }
          },
          responsive: true,
          maintainAspectRatio: false
        }
      })

      // 初始化应用占用图表
      this.charts.rightTop = new Chart(this.$refs.rightTopChart, {
        type: 'bar',
        data: {
          labels: ['WebEx视频会议', '小象视频', 'Zoom', '腾讯会议', '钉钉会议'],
          datasets: [
            {
              label: '异常流',
              data: [30, 25, 20, 15, 12],
              backgroundColor: '#2196F3',
              borderRadius: 2,
              maxBarThickness: 20
            },
            {
              label: '全网',
              data: [32, 27, 22, 17, 14],
              backgroundColor: '#FF5722',
              borderRadius: 2,
              maxBarThickness: 20
            }
          ]
        },
        options: {
          indexAxis: 'x',
          scales: {
            y: {
              beginAtZero: true,
              max: 40,
              ticks: {
                stepSize: 10,
                color: '#999',
                font: {
                  size: 12
                },
                callback: function(value) {
                  return value + '%';
                }
              },
              grid: {
                color: 'rgba(255, 255, 255, 0.1)',
                drawBorder: false
              }
            },
            x: {
              ticks: {
                color: '#999',
                font: {
                  size: 12
                }
              },
              grid: {
                display: false
              }
            }
          },
          plugins: {
            legend: {
              display: true,
              position: 'top',
              align: 'end',
              labels: {
                color: '#fff',
                usePointStyle: true,
                pointStyle: 'circle',
                padding: 15,
                font: {
                  size: 12
                }
              }
            },
            tooltip: {
              enabled: true,
              backgroundColor: 'rgba(0, 0, 0, 0.7)',
              titleColor: '#fff',
              bodyColor: '#fff',
              padding: 10,
              displayColors: true
            }
          },
          responsive: true,
          maintainAspectRatio: false
        }
      })

      // 初始化趋势图表
      this.charts.line = new Chart(this.$refs.lineChart, {
        type: 'line',
        data: this.trendData,
        options: {
          scales: {
            y: {
              beginAtZero: true,
              max: 5,
              ticks: {
                stepSize: 1,
                color: '#999',
                font: {
                  size: 12
                },
                callback: function(value) {
                  return value + '%';
                }
              },
              grid: {
                color: 'rgba(255, 255, 255, 0.1)',
                drawBorder: false
              }
            },
            x: {
              ticks: {
                color: '#999',
                font: {
                  size: 12
                },
                maxRotation: 0
              },
              grid: {
                color: 'rgba(255, 255, 255, 0.1)',
                drawBorder: false
              }
            }
          },
          plugins: {
            legend: {
              position: 'top',
              align: 'end',
              labels: {
                color: '#fff',
                usePointStyle: true,
                pointStyle: 'circle',
                padding: 15,
                font: {
                  size: 12
                }
              }
            },
            tooltip: {
              enabled: true,
              backgroundColor: 'rgba(0, 0, 0, 0.7)',
              titleColor: '#fff',
              bodyColor: '#fff',
              padding: 10,
              displayColors: true,
              callbacks: {
                label: function(context) {
                  return context.dataset.label + ': ' + context.parsed.y + '%';
                }
              }
            }
          },
          responsive: true,
          maintainAspectRatio: false,
          elements: {
            point: {
              radius: 0,
              hoverRadius: 6
            },
            line: {
              borderWidth: 2
            }
          }
        }
      })

      // 初始化应用丢包率图表
      this.charts.rightBottom = new Chart(this.$refs.rightBottomChart, {
        type: 'bar',
        data: {
          labels: ['Zoom', 'Teams', 'DingTalk', 'Tencent', 'WebEx'],
          datasets: [{
            data: [35, 25, 20, 15, 12],
            backgroundColor: '#2196F3',
            borderRadius: 2,
            maxBarThickness: 15,
            barPercentage: 0.5,
            categoryPercentage: 0.7
          }]
        },
        options: {
          indexAxis: 'x',
          layout: {
            padding: {
              top: 10,
              bottom: 10
            }
          },
          scales: {
            y: {
              beginAtZero: true,
              max: 40,
              ticks: {
                stepSize: 10,
                color: '#999',
                font: {
                  size: 12
                },
                callback: function(value) {
                  return value + '%';
                }
              },
              grid: {
                color: 'rgba(255, 255, 255, 0.1)',
                drawBorder: false
              }
            },
            x: {
              ticks: {
                color: '#999',
                font: {
                  size: 12
                }
              },
              grid: {
                display: false
              }
            }
          },
          plugins: {
            legend: {
              display: false
            },
            tooltip: {
              enabled: true,
              backgroundColor: 'rgba(0, 0, 0, 0.7)',
              titleColor: '#fff',
              bodyColor: '#fff',
              padding: 8,
              displayColors: false,
              callbacks: {
                label: function(context) {
                  return context.parsed.y + '%';
                }
              }
            }
          },
          responsive: true,
          maintainAspectRatio: false
        }
      })
    }
  }
}
</script>

<style scoped>
.resources-center {
  padding: 20px;
  background: #1a1a1a;
  color: white;
  min-height: 100vh;
}

.header {
  margin-bottom: 20px;
}

.stat-box {
  display: flex;
  justify-content: space-between;
  background: rgba(0, 0, 0, 0.3);
  padding: 15px;
  border-radius: 8px;
}

.stat-item {
  text-align: center;
}

.stat-item .number {
  font-size: 24px;
  font-weight: bold;
  display: block;
}

.stat-item .label {
  font-size: 14px;
  color: #999;
}

.main-content {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 20px;
}

.chart-card {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 20px;
}

.chart-card h3 {
  margin-bottom: 10px;
  font-size: 14px;
  color: #fff;
  font-weight: normal;
}

.center-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  height: 100%;
}

.center-title {
  text-align: center;
  color: #fff;
  font-size: 18px;
  margin-bottom: 20px;
}

.orbit-system {
  position: relative;
  width: 100%;
  height: 480px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.center-circle {
  position: absolute;
  left: 50%;
  bottom: 140px;
  transform: translateX(-50%);
  width: 260px;
  height: 260px;
  background: rgba(32, 32, 32, 0.85);
  border-radius: 50%;
  box-shadow: 0 8px 40px 0 rgba(0,0,0,0.35), 0 1.5px 8px 0 rgba(80,120,180,0.10) inset;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  border: 2px solid rgba(255,255,255,0.10);
  transition: width 0.3s, height 0.3s;
  box-shadow:
    0 0 40px 8px rgba(0,149,255,0.10) inset,
    0 8px 40px 0 rgba(0,0,0,0.35);
  animation: circle-glow 3s infinite linear alternate;
}

@keyframes circle-glow {
  0% { box-shadow: 0 0 40px 8px rgba(0,149,255,0.10) inset, 0 8px 40px 0 rgba(0,0,0,0.35);}
  100% { box-shadow: 0 0 60px 16px rgba(0,149,255,0.18) inset, 0 8px 40px 0 rgba(0,0,0,0.35);}
}

.base-grid {
  position: absolute;
  left: 50%;
  bottom: 0px;
  width: 520px;
  height: 260px;
  transform: translateX(-50%) perspective(800px) rotateX(60deg);
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.15) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.15) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: 0.5;
  border-radius: 50%;
  z-index: 1;
  box-shadow: 0 10px 32px 0 rgba(0,0,0,0.18);
}

.inner-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 3;
}

.app-name {
  color: #fff;
  font-size: 18px;
  text-align: center;
  text-shadow: 0 2px 8px rgba(0,0,0,0.25);
  margin-top: 10px;
}

.stat-box {
  display: flex;
  justify-content: space-between;
  background: rgba(0, 0, 0, 0.3);
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 30px;
  width: 100%;
}

.stat-item {
  text-align: center;
  flex: 1;
  padding: 0 10px;
}

.stat-item .number {
  font-size: 24px;
  font-weight: bold;
  color: #fff;
  display: block;
  margin-bottom: 5px;
}

.stat-item .label {
  font-size: 14px;
  color: #999;
}

.circle-container {
  position: relative;
  width: 100%;
  height: calc(100% - 120px);
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
}

.aom-chart-container {
  position: relative;
  width: 100%;
  height: 180px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
}

.doughnut-wrapper {
  position: relative;
  width: 140px;
  height: 140px;
}

.center-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px;
  font-weight: bold;
  color: #fff;
}

.legend-container {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-left: 20px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.legend-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.legend-text {
  font-size: 14px;
  color: #fff;
  white-space: nowrap;
  
}

.chart-wrapper {
  position: relative;
  height: 200px;
  padding: 10px;
}

.y-axis-label {
  position: absolute;
  left: -10px;
  top: 10px;
  color: #999;
  font-size: 12px;
  writing-mode: vertical-lr;
  transform: rotate(180deg);
}

.trend-chart {
  height: 250px;  /* 增加趋势图的高度 */
}

.chart-wrapper {
  position: relative;
  height: 200px;
  padding: 10px 10px 20px 10px;  /* 增加底部内边距以适应x轴标签 */
}
</style>

